<template>
    <div>
        <v-md-editor :modelValue="modelValue" :height="height+'px'" @update:modelValue="updateModelValue"
                     :disabled-menus="[]"
                     :include-level="[1,2,3,4,5,6]"
                     @upload-image="handleUploadImage"
                     @change="change"></v-md-editor>
    </div>
</template>

<script setup>
    import VMdEditor from '@kangc/v-md-editor';
    import '@kangc/v-md-editor/lib/style/base-editor.css';
    import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
    import '@kangc/v-md-editor/lib/theme/style/github.css';

    import hljs from 'highlight.js';

    VMdEditor.use(githubTheme, {
        Hljs: hljs,
    });
    const props = defineProps({
        modelValue: {
            type: String,
            default: "",
        },
        height: {
            type: Number,
            default: 500,
        }
    })

    const updateModelValue = (value) => {
        emit('update:modelValue', value);
    };
    const emit = defineEmits();
    const change = (markdownContent, htmlContent) => {
        emit("update:modelValue", markdownContent);
        emit("htmlContent", htmlContent)

    }
    const handleUploadImage = (event, insertImage, files) => {


    }
</script>

<style lang="scss">
</style>
  